{% extends 'host/base.html' %}
{% load timefilter %}
{% block title %} cpu信息 {% endblock %}
{% block content %}
    {% include 'host/cpu-header.html' %}
    <div>
        <div id="main" style="width: 80%;height:400px;"></div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        {# 首先，生命两个javascript数组 #}
        var series_data=[];
        var xAxis_data=[];
        {# 使用循环，依次将数据库需要展示的数据添加到声明的两个数组中 #}
        {% for data in datas %}
            series_data.push({{ data.user_percent }})
            xAxis_data.push("{{ data.create_time }}")
        {% endfor %}
        // 指定图表的配置项和数据
        option = {
            xAxis: {
                type: 'category',
                data: xAxis_data
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: series_data,
                    type: 'line',
                    smooth: true
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
{% endblock %}